import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import '../../generated/l10n.dart';
import '../../utils/DIYColors.dart';
import '../../utils/Logcat.dart';
import '../../utils/Utils.dart';

class DevicePage extends StatefulWidget {
  const DevicePage({super.key});

  @override
  State<StatefulWidget> createState() {
    return _DevicePageState();
  }
}

class _DevicePageState extends State<DevicePage> {
  var diaphaneity = 1.0;
  List<String> iconList = [];
  List<String> iconName = [];

  @override
  void initState() {
    super.initState();
    Future.delayed(Duration.zero, () {
      setState(() {
        _initDate();
      });
    });
  }

  _initDate() {
    iconList.add(Utils.instance.getImagePathPNG("icon_device_function_news"));
    iconList.add(Utils.instance.getImagePathPNG("icon_device_function_time"));
    iconList.add(Utils.instance.getImagePathPNG("icon_device_function_check"));
    iconList.add(Utils.instance.getImagePathPNG("icon_device_function_camera"));
    iconList.add(Utils.instance.getImagePathPNG("icon_device_function_clock"));
    iconList.add(Utils.instance.getImagePathPNG("icon_device_function_bright"));
    iconList.add(Utils.instance.getImagePathPNG("icon_device_function_sleep"));
    iconList
        .add(Utils.instance.getImagePathPNG("icon_device_function_disturb"));
    iconList
        .add(Utils.instance.getImagePathPNG("icon_device_function_sedentary"));
    iconList
        .add(Utils.instance.getImagePathPNG("icon_device_function_drinking"));
    iconList
        .add(Utils.instance.getImagePathPNG("icon_device_function_contacts"));
    iconList.add(Utils.instance.getImagePathPNG("icon_device_function_hr"));
    iconList.add(Utils.instance.getImagePathPNG("icon_device_function_wallet"));
    iconList.add(Utils.instance.getImagePathPNG("icon_device_function_mp"));

    iconName.add(S.of(context).MessageNotifications);
    iconName.add(S.of(context).TimeFormat);
    iconName.add(S.of(context).FindWacth);
    iconName.add(S.of(context).TakingPictures);
    iconName.add(S.of(context).AlarmClock);
    iconName.add(S.of(context).WristScreen);
    iconName.add(S.of(context).SleepDetection);
    iconName.add(S.of(context).DoNotDisturbMode);
    iconName.add(S.of(context).SedentaryReminder);
    iconName.add(S.of(context).DrinkWaterReminders);
    iconName.add(S.of(context).Contact);
    iconName.add(S.of(context).HeartRateDetection);
    iconName.add(S.of(context).purse);
    iconName.add(S.of(context).PeriodReminders);
  }

  void _setDiaphaneity() {
    // 使用 setState方法刷新
    setState(() {
      if (diaphaneity == 1) {
        diaphaneity = 0.3;
      } else {
        diaphaneity = 1.0;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        extendBodyBehindAppBar: true,
        backgroundColor: Colors.transparent,
        body: /*通过NotificationListener来阻止SingleChildScrollView的滑动事件在向上传递*/
            NotificationListener<ScrollNotification>(
                onNotification: (ScrollNotification notification) {
                  // 返回true来阻止事件向上传递
                  return true;
                },
                child: SafeArea(
                    child: SingleChildScrollView(
                        child: Column(children: [
                  _device(),
                  _dialMarket(),
                  _functionList(),
                  _systemFeatures(),
                  _helpGuide(),
                  SizedBox(
                    height: 20.h,
                  )
                ])))));
  }

  // 设备信息
  GestureDetector _device() {
    return GestureDetector(
      child: Container(
          margin: EdgeInsets.only(left: 15.r, right: 15.r, top: 15.r),
          padding:
              EdgeInsets.only(left: 15.r, top: 20.r, right: 15.r, bottom: 20.r),
          width: double.infinity,
          height: 200.h,
          decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(12.r)),
              color: Colors.white),
          child: Opacity(
              opacity: diaphaneity,
              child: Row(mainAxisAlignment: MainAxisAlignment.start, children: [
                Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Row(children: [
                        Text(
                          "name",
                          style: TextStyle(
                              color: Colors.black,
                              fontSize: 16.sp,
                              fontWeight: FontWeight.bold),
                        ),
                        SizedBox(width: 5.w),
                        Text(
                          "未连接",
                          style: TextStyle(
                              color: Colors.green,
                              fontSize: 16.sp,
                              fontWeight: FontWeight.bold),
                        )
                      ]),
                      SizedBox(height: 5.h),
                      Text(
                        "MAC：12:12:12:12:12:12",
                        style: TextStyle(
                            color: DIYColors.gray_99, fontSize: 14.sp),
                      ),
                      SizedBox(height: 5.h),
                      Text(
                        "电量：40${S.of(context).percentage}",
                        style: TextStyle(
                            color: DIYColors.gray_99, fontSize: 14.sp),
                      ),
                      SizedBox(height: 5.h),
                      Text(
                        "版本：12:12:12:12:12:12",
                        style: TextStyle(
                            color: DIYColors.gray_99, fontSize: 14.sp),
                      ),
                      SizedBox(height: 24.h),
                      OutlinedButton(
                          onPressed: () {},
                          style: ButtonStyle(
                              shape: MaterialStateProperty.all<
                                      RoundedRectangleBorder>(
                                  RoundedRectangleBorder(
                                      borderRadius:
                                          BorderRadius.circular(50.r))),
                              side:
                                  MaterialStateProperty.resolveWith<BorderSide>(
                                      (Set<MaterialState> states) {
                                if (states.contains(MaterialState.pressed)) {
                                  // 按压状态下的边框颜色
                                  return const BorderSide(
                                      color: DIYColors.orange_2d);
                                }
                                // 默认状态下的边框颜色
                                return const BorderSide(
                                    color: DIYColors.orange_2d);
                              })),
                          child: Text(S.of(context).Unbind,
                              style: TextStyle(
                                  color: DIYColors.orange_2d, fontSize: 12.sp)))
                    ]),
                const Expanded(child: SizedBox()),
                Image.asset(Utils.instance.getImagePathPNG("device"))
              ]))),
      onTap: () {
        _setDiaphaneity();
      },
    );
  }

  //表盘市场
  Container _dialMarket() {
    return Container(
        margin: EdgeInsets.only(left: 15.r, right: 15.r, top: 25.r),
        child: Column(mainAxisAlignment: MainAxisAlignment.start, children: [
          Row(mainAxisAlignment: MainAxisAlignment.start, children: [
            SizedBox(width: 15.w),
            Text(S.of(context).DialMarket,
                style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 16.sp,
                    color: Colors.black)),
            const Expanded(child: SizedBox()),
            GestureDetector(
                child: Row(children: [
                  Text(S.of(context).all,
                      style:
                          TextStyle(color: DIYColors.gray_99, fontSize: 14.sp)),
                  Image.asset(Utils.instance.getImagePathPNG("rightward"),
                      width: 24.w, height: 14.h)
                ]),
                onTap: () {
                  //点击事件
                }),
            SizedBox(width: 15.w),
          ]),
          SizedBox(height: 15.h),
          Row(
            children: [
              GestureDetector(
                child: Image.asset(
                    Utils.instance.getImagePathPNG("icon_device_dp_0"),
                    width: 107.w,
                    height: 132.h),
                onTap: () {
                  //点击事件
                },
              ),
              const Expanded(child: SizedBox()),
              GestureDetector(
                child: Image.asset(
                    Utils.instance.getImagePathPNG("icon_device_dp_2"),
                    width: 107.w,
                    height: 132.h),
                onTap: () {
                  //点击事件
                },
              ),
              const Expanded(child: SizedBox()),
              GestureDetector(
                child: Image.asset(
                    Utils.instance.getImagePathPNG("icon_device_dp_1"),
                    width: 107.w,
                    height: 132.h),
                onTap: () {
                  //点击事件
                },
              ),
            ],
          )
        ]));
  }

  //功能列表
  Container _functionList() {
    return Container(
        margin: EdgeInsets.only(left: 15.r, right: 15.r, top: 26.r),
        width: double.infinity,
        child: Column(mainAxisAlignment: MainAxisAlignment.start, children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              SizedBox(width: 15.w),
              Text(S.of(context).FeatureManagement,
                  style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 16.sp,
                      color: Colors.black))
            ],
          ),
          SizedBox(height: 15.h),
          Opacity(
              opacity: diaphaneity,
              child: Container(
                  margin: EdgeInsets.only(left: 0.r, right: 0.r, top: 0.r),
                  height: 75 * (iconList.length / 2).h,
                  child: GridView.builder(
                      physics: const NeverScrollableScrollPhysics(),
                      shrinkWrap: true,
                      gridDelegate:
                          const SliverGridDelegateWithFixedCrossAxisCount(
                              crossAxisCount: 2,
                              crossAxisSpacing: 10,
                              mainAxisSpacing: 10,
                              childAspectRatio: 176 / 65),
                      itemCount: iconList.length,
                      itemBuilder: (BuildContext context, int index) {
                        return GestureDetector(
                            child: Container(
                                margin: EdgeInsets.only(
                                    left: 8.r, right: 8.r, top: 5.r),
                                decoration: BoxDecoration(
                                    borderRadius:
                                        BorderRadius.all(Radius.circular(12.r)),
                                    color: Colors.white),
                                child: Row(
                                    // crossAxisAlignment: CrossAxisAlignment.center,
                                    mainAxisAlignment: MainAxisAlignment.start,
                                    children: [
                                      SizedBox(width: 20.sp),
                                      Image.asset(iconList[index],
                                          width: 30.w, height: 30.h),
                                      SizedBox(width: 10.sp),
                                      Text(iconName[index],
                                          style: TextStyle(
                                              color: Colors.black,
                                              fontSize: 14.sp),
                                          maxLines: 1,
                                          overflow: TextOverflow.ellipsis,
                                          textAlign: TextAlign.left)
                                    ])),
                            onTap: () {
                              // 点击事件
                              Logcat.instance.d("点击了$index");
                            });
                      })))
        ]));
  }

  //系统个功能
  Container _systemFeatures() {
    return Container(
        margin: EdgeInsets.only(left: 15.r, right: 15.r, top: 15.r),
        width: double.infinity,
        child: Column(mainAxisAlignment: MainAxisAlignment.start, children: [
          Row(mainAxisAlignment: MainAxisAlignment.start, children: [
            SizedBox(width: 15.w),
            Text(S.of(context).SystemFeatures,
                style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 16.sp,
                    color: Colors.black))
          ]),
          SizedBox(height: 10.h),
          Container(
              padding: EdgeInsets.all(15.r),
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(12.r)),
                  color: Colors.white),
              width: double.infinity,
              child:
                  Column(mainAxisAlignment: MainAxisAlignment.start, children: [
                _actionItems("shutdown", S.of(context).Shutdown, onTap: () {
                  //点击事件
                }),
                _divider(),
                _actionItems("reboot", S.of(context).Reboot, onTap: () {
                  //点击事件
                }),
                _divider(),
                _actionItems("factory_reset", S.of(context).FactoryReset,
                    onTap: () {
                  //点击事件
                }),
                _divider(),
                _actionItems("upgrade", S.of(context).WatchUpdates, onTap: () {
                  //点击事件
                })
              ]))
        ]));
  }

  //单个系统功能组建
  GestureDetector _actionItems(imageName, name, {GestureTapCallback? onTap}) {
    return GestureDetector(
        onTap: onTap,
        child: Container(
            width: double.infinity,
            decoration: const BoxDecoration(),
            height: 50.h,
            child: Row(mainAxisAlignment: MainAxisAlignment.start, children: [
              Image.asset(Utils.instance.getImagePathPNG(imageName),
                  width: 20.r, height: 20.r),
              SizedBox(width: 15.w),
              Text(name,
                  style: TextStyle(color: Colors.black, fontSize: 14.sp)),
              const Expanded(child: SizedBox()),
              Image.asset(Utils.instance.getImagePathPNG("rightward"),
                  width: 24.w, height: 14.h)
            ])));
  }

  //帮助指南
  Container _helpGuide() {
    return Container(
        margin: EdgeInsets.only(left: 15.r, right: 15.r, top: 15.r),
        width: double.infinity,
        child: Column(mainAxisAlignment: MainAxisAlignment.start, children: [
          Row(mainAxisAlignment: MainAxisAlignment.start, children: [
            SizedBox(width: 15.w),
            Text(S.of(context).HelpGuide,
                style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 16.sp,
                    color: Colors.black))
          ]),
          SizedBox(height: 10.h),
          Container(
              padding: EdgeInsets.all(15.r),
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(12.r)),
                  color: Colors.white),
              width: double.infinity,
              child:
                  Column(mainAxisAlignment: MainAxisAlignment.start, children: [
                _helpGuideItems("set", S.of(context).SystemPermissionDetails,
                    S.of(context).AppSystemPermissionDetails,
                    onTap: () {}),
                _divider(),
                _helpGuideItems(
                    "protection",
                    S.of(context).ApplyBackgroundProtection,
                    S.of(context).AppApplyBackgroundProtection,
                    onTap: () {}),
              ]))
        ]));
  }

  //单个帮助指南组建
  GestureDetector _helpGuideItems(imageName, name, description,
      {GestureTapCallback? onTap}) {
    return GestureDetector(
        onTap: onTap,
        child: Container(
            width: double.infinity,
            decoration: const BoxDecoration(),
            height: 50.h,
            child: Row(mainAxisAlignment: MainAxisAlignment.start, children: [
              Image.asset(Utils.instance.getImagePathPNG(imageName),
                  width: 20.r, height: 20.r),
              SizedBox(width: 15.w),
              Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(name,
                        style: TextStyle(color: Colors.black, fontSize: 14.sp)),
                    SizedBox(height: 5.h),
                    Text(description,
                        style: TextStyle(color: Colors.black, fontSize: 14.sp)),
                  ]),
              const Expanded(child: SizedBox()),
              Image.asset(Utils.instance.getImagePathPNG("rightward"),
                  width: 24.w, height: 14.h)
            ])));
  }

  //分割线
  Divider _divider() {
    return Divider(
      color: DIYColors.gray_cc,
      thickness: 1.r,
      indent: 35.w,
      endIndent: 10.w,
    );
  }
}
